<template>
  <div class="App">
    <TabCon v-bind:cloose="cloose">
      <!-- 使用具名插槽实现表头自定义 -->
      <template #tabHeader>
        <td>序号</td>
        <td>图片</td>
        <td>商品</td>
        <td>标签</td>
      </template>

      <!-- 使用具名插槽实现表体自定义 -->
      <template #tabBody="obj">
        <td>{{ obj.in+1 }}</td>
        <td><img v-bind:src="obj.rowData.imgUrl"/></td>
        <td>{{ obj.rowData.name }}</td>
        <td><MyTag v-model="obj.rowData.tag"></MyTag></td>
      </template>
    </TabCon>
  </div>
</template>

<script>
import MyTag from "./components/MyTag.vue";
import TabCon from "./components/TabCon.vue";
export default {
  components: {
    TabCon,
    MyTag
  },
  data() {
    return {
      titles: [
        { id: 1, name: "序号" },
        { id: 2, name: "图片" },
        { id: 3, name: "名称" },
        { id: 4, name: "标签" },
      ],
      cloose: [
        // require("@/assets/logo.png") 加载脚手架中的图片
        {
          id: 1,
          imgUrl: require("@/assets/logo.png"),
          name: "皮衣",
          tag: "衣服",
        },
        {
          id: 2,
          imgUrl: require("./assets/logo.png"),
          name: "雨衣",
          tag: "鞋子",
        },
        {
          id: 3,
          imgUrl: require("./assets/logo.png"),
          name: "毛衣",
          tag: "裤子",
        },
        {
          id: 4,
          imgUrl: require("./assets/logo.png"),
          name: "秋衣",
          tag: "帽子",
        },
      ],
    };
  },
  methods: {
    chnTag(newVal) {
      console.log("app", newVal);
    },
  },
};
</script>

<style>
</style>